<script setup>
import {computed} from 'vue'
const prps = defineProps(["id","equipmentName","imgUrl"])


const showUrl = computed(() => {
    console.log(prps.id ,prps.imgUrl)
    if (prps.id && prps.imgUrl) {
        return prps.imgUrl;
    } else {
        return "/src/assets/img/add.png";
    }
})


</script>
<template>
    <div class="equipment-select-item">
        <img  :src="showUrl" alt="请选择装备" class="icon-item">
        <img src="@/assets/img/close.png"  class="close-item">
    </div>
</template>
<style lang="less" scoped>
.equipment-select-item{
    width: 50px;
    height: 50px;
    padding: 1px;
    border: 1px solid rgb(30, 146, 131);
    margin: 3px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .icon-item{
        width: 80%;
        height: 80%;
    }
    .close-item{
        width: 23px;
        height: 23px;
        position: absolute;
        top: -10px;
        right: -10px;
    }
}
</style>